<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
			<!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件（一般不用引入） -->
		<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/static-common/style/tb.js/dialog_29a9417.css,/tb/static-common/lib/tbui/style/all_1888f28.css" />
		<link rel="stylesheet" href="http://tb1.bdstatic.com/??/tb/_/index_7712603.css,/tb/_/search_2e2269a.css" />
		<link rel="stylesheet" type="text/css" href="/wx/css/own.css">
		<link rel="stylesheet" type="text/css" href="/wx/css/body.css">
		<title>驾驶记录</title>
		<style type="text/css">
			img {
				width: 100%
			}
			.a{
    			-webkit-transition: all 1000ms;
			    -moz-transition: all 1000ms;
			    transition: all 1000ms;
			    width:10px;
			    height: 0px;
			}
			.d{
				position: absolute; 
				width:10px;
				height: 0px;
				margin-top: 100px;
				-webkit-transition: all 1000ms;
   				-moz-transition: all 1000ms;
    			transition: all 1000ms;
			}
			ul{
				list-style:none;
}
			.test_ul li{
				float:left;
				font-family: "微软雅黑";
				font-size: small;
				padding: 20px 2%;
				line-height: 0px;
				} 
				
		</style>
		<script>
	 		var i=0; 
			var s=setInterval(time,10);
			function time(){
				if(i==$("#myfen").val()){
					clearInterval(s);
				}
				$("#fen").html(i);
				i++
			} 
		</script>
	</head>

	<body style="overflow: hidden;">
			<div class="zhoujishu-div1">
				<img src="/wx/images/u-car.png" style="width: 100px;">
				<p class="zhoujishu-chepai">${record.pcarNum }</p>
				<p class="zhoujishu-today">今日</p>
				<div style="margin-top:10px">
				<span class="fen" id="fen" ></span>
				<input type="hidden" value="${record.fen }" id="myfen">
				<span class="fen-fen">分</span>
				</div>
				<div class="zhoujishu-centerDiv">
						<div>
							<p>
								<span class="centerbottom-span">${record.TodayDate }</span>
								<span class="centerbottom-span-span2" >分钟</span>
							</p>
							<p class="centerDiv">耗时</p>
						</div>
						<div>
							<p>
								<span class="centerbottom-span">${record.TodayRange }</span>
								<span class="centerbottom-span-span2">公里</span>
							</p>
							<p class="centerDiv">里程</p>
						</div>
						<div>
							<p>
								<span class="centerbottom-span">${record.oil }</span>
								<span class="centerbottom-span-span2">升</span>
							</p>
							<p class="centerDiv">耗油</p>
						</div>
		    	</div>
		    	<div class="zhoujishu-record">
		    		<img src="/wx/images/3.png" style="width:24px">
		    		<span>最近一周驾驶记录</span>
		    	
		    	</div>
		    	
		    	 <div id="container" style="height: 200px"></div>
		    	 <div class="zhoujishu-BottomDiv">
					
								<div class="left">
									<div></div>
									<span>行驶里程（公里）</span>
								</div>
								
								<div class="right">
									<div></div>
									<span>行驶时间（分钟）</span>
								</div>
						
				</div>
     		</div>
     <input type="hidden" id="weekList" value="${record.WeekdayRange }">
     <input type="hidden" id="timeList" value="${record.WeekdayDate }">
<script type="text/javascript" src="/wx/js/echarts.js"></script>
<script type="text/javascript">
var rang=${record.WeekdayRange };
var date=${record.WeekdayDate };
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '堆叠柱状图';

option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
//  legend: {
//      data:['直接访问','邮件营销']
//  },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'里程',
            type:'bar',
            data:rang
        },
        {
            name:'时间',
            type:'bar',
            data:date
        }
    ]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
	</body>

</html>